<template>
  <div class="home">
    <div class="header">
      <h1 class="title">欢迎来到 婚纱摄影预约 管理系统</h1>
      <p class="subtitle">让每一个瞬间都被珍藏</p>
    </div>
<!--    <div class="content">-->
<!--      <div class="intro">-->
<!--        <h2>介绍</h2>-->
<!--        <p>这是一个为摄影爱好者设计的管理系统，您可以在这里上传和管理您的照片，并与他人分享。</p>-->
<!--        <router-link to="/" class="btn">了解更多</router-link>-->
<!--      </div>-->
      <div class="recent-photos">
<!--        <h2>最近上传</h2>-->
        <ul>
          <li v-for="photo in recentPhotos" :key="photo.id">
            <img :src="photo.url" :alt="photo.description">
            <p class="photo-desc">{{ photo.description }}</p>
          </li>
        </ul>
<!--        <router-link to="/" class="btn btn-primary">查看全部</router-link>-->
      </div>
<!--    </div>-->
  </div>
</template>

<script>
export default {
  data() {
    return {
      recentPhotos: [
        {
          id: 1,
          url: 'https://www.guanzhunet.com/uploads/allimg/161129/13-16112Z91T2.jpg',
          description: '美丽日落套餐'
        },
        {
          id: 2,
          url: 'https://img.sj33.cn/uploads/allimg/201502/234KHT7-7.jpg',
          description: '迷人城市夜景套餐'
        },
        {
          id: 3,
          url: 'https://img.51miz.com/Photo/2017/05/06/22/P1013019_6ff20b65bbed4b1e97a60151fee8a298.jpg',
          description: '清晨海岸线套餐'
        }
      ]
    };
  },
  created() {
    //如果登录用户是顾客，则跳转到顾客首页
    console.log(this.$store.state.user.roles[0])
    if (this.$store.state.user.roles[0] === 'customer') {
      location.href = 'http://localhost:5173/'
    }
  },
};
</script>

<style scoped>
  .home {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
  }

  .header {
    margin-bottom: 3rem;
  }

  .title {
    font-size: 4rem;
    font-weight: bold;
    color: #2d2d2d;
  }

  .subtitle {
    font-size: 1.5rem;
    color: #2d2d2d;
  }

  .intro {
    margin-bottom: 3rem;
  }

  .intro h2 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #2d2d2d;
  }

  .intro p {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    color: #2d2d2d;
  }

  .btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 1.25rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background-color: #2d2d2d;
    transition: background-color 0.3s;
  }

  .btn:hover {
    background-color: #4a4a4a;
  }

  .btn-primary {
    background-color: #4b86f3;
    margin-top: 2rem;
  }

  .btn-primary:hover {
    background-color: #6da8f6;
  }

  .recent-photos h2 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #2d2d2d;
  }

  .recent-photos ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2rem;
  }

  .recent-photos li {
    margin-right: 1rem;
    margin-bottom: 1rem;
    list-style: none;
    width: 300px;
    height: 300px;
    overflow: hidden;
    position: relative;
    border-radius: 0.5rem;
  }

  .recent-photos img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
  }

  .recent-photos li:hover img {
    transform: scale(1.05);
  }

  .photo-desc {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem;
    background-color: rgba(45, 45, 45, 0.7);
    color: #ffffff;
    font-size: 1.25rem;
    text-align: center;
  }
</style>
